<template>
  <el-form :model="menu" :rules="rules" label-width="100px" ref="addFood" >
    <el-form-item label="菜品名称" prop="cateName">
      <el-input v-model="menu.cateName" />
    </el-form-item>
    <!-- 级联选择器 -->
    <el-form-item label="父级菜单" prop="pid">
      <el-cascader v-model="menu.pid" :options="pcates" :props="{ checkStrictly: true, label: 'cateName',emitPath: false, value: 'id' }"  clearable />
    </el-form-item>
    <!-- 级联选择器 -->
    <!-- 上传图片 -->
    <el-form-item label="上传图片" prop="icon">
     <el-upload ref="uploadRef" action="/api/upload" list-type="picture-card" :auto-upload="false" name="file" :on-success="uploadSuccess" :before-upload="beforeUpload" accept=".jpg,.png,.gif">
      <el-icon @click="doUpload">
        <Plus />
      </el-icon>
    </el-upload>
    <img :src="menu.icon" width="100" alt="">
    <el-button @click="doUpload" type="primary">点击上传</el-button>
    </el-form-item>
    <!-- 上传图片 -->
    <el-form-item label="是否上架" prop="enable">
      <el-switch v-model="menu.enable" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="add">添加</el-button>
      <el-button @click="clear">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// import { messageConfig } from 'element-plus'
import { addFood } from '@/api/FoodLists'

export default {
  props: {
    cates: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      rules: {
        cateName: [
          {
            required: true,
            message: '菜品名称必填'
          },
          {
            pattern: /^([\u4e00-\u9fa5]{2,6})$/,
            message: '必须由1-10位汉字组成'
          }
        ],
        pid: [
          {
            required: true,
            message: '父级菜单必选'
          }
        ],
        enable: [
          {
            required: true,
            message: '是否上架'
          }
        ]

      },
      menu: {
        cateName: '',
        icon: '',
        enable: true,
        pid: -1
      },
      pcates: [
        {
          cateName: '顶层分类',
          id: -1
        }
      ]
    }
  },
  watch: {
    cates: {
      handler (newValue) {
        this.pcates = [
          ...this.pcates,
          ...newValue
        ]
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    clear () {
      this.$refs.addFood.resetFields()
    },
    add () {
      //  方法一
      this.$refs.addFood.validate().then(() => {
        addFood(this.menu).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 2000,
              onClose: () => {
                this.$router.go(0)
              }
            })
          }
        })
        this.$refs.addFood.resetFields()
      }).catch(() => {
        alert('验证失败')
      })
      /* // 方法二
      this.$refs.addFood.validate((validate) => {
        console.log(validate)
      }) */
    },
    // 图片上传
    beforeUpload (file) {
      if (file.size > 1024 * 1024 * 5) {
        alert('图片过大，不能超过5m')
        return false
      } else {
        return true
      }
    },
    doUpload () {
      this.$refs.uploadRef.submit()
    },
    uploadSuccess (res) {
      if (res.code === 200) {
        this.menu.icon = res.data.url
        this.$message({
          type: 'success',
          message: res.msg
        })
      }
    }

  }
}
</script>

<style lang="scss" scoped>
#el-id-2635-12 {
  float: left;
}

</style>
